<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>123</div>
    <script>
        var div = document.querySelector('div');
        // div.onclick =function(event){
        //     console.log(event);
        // }
        div.addEventListener('click',function(event){
            console.log(event);
        })
        //1.event 就是一个事件对象 写到我们的侦听函数的小括号里 相当于形参
        //2.事件对象只有有了事件才会存在，他是系统给我们自动创建的，不需要我们传递形参
        //3.事件对象是我们事件的一系列相关数据的集合 跟事件相关比如鼠标事件就包含了鼠标相关的信息、鼠标坐标等
        //事件对象可以自己命名比如 event 、 evt 、e
        //事件对象也有兼容性问题 IE678通过window.event 得到事件对象 
        //兼容性写法 e = e||window.event;

        /*事件对象的常见属性和方法
        e.target  返回触发事件的对象   标准
        e.srcElement  返回触发事件的对象  非标准 IE678使用
        e.type 返回事件类型  比如click\mouseover 不带on
        e.cancelBubble 阻止冒泡   非标准
        e.returnValue  阻止默认事件  非标准 比如不让链接转跳
        e.perventDafault() 阻止默认事件（默认行为） 标准 比如不让链接转跳
        e.stopPropagation()阻止毛泡，标准*/
    </script>
</body>
</html>